<script>
    {% comment %}点击名称显示介绍{% endcomment %}

    function popMsg(HTML) {
        var containerOfWhole = document.getElementById('container');
        {% comment %}创建新窗口之前删掉旧窗口{% endcomment %}
        try {
            let msg = document.getElementById('msg');
            containerOfWhole.removeChild(msg);
        } catch (e) {

        }

        let newDiv = document.createElement('div');
        newDiv.id = 'msg';
        newDiv.innerHTML = HTML;
        containerOfWhole.appendChild(newDiv);
        newDiv.style.left = (parseInt(window.innerWidth) - parseInt(newDiv.offsetWidth)) / 2 + 'px';
        newDiv.style.top = (parseInt(window.innerHeight) - parseInt(newDiv.offsetHeight)) / 2 + 'px';
        let closeMsg = document.getElementById('closeMsg');
        closeMsg.onclick = function () {   {% comment %}点击关闭提示框{% endcomment %}
            let msg = document.getElementById('msg');
            containerOfWhole.removeChild(msg);
        }
    }

    function addDescTag() {
        var descUserDiv = document.getElementsByClassName('descUser');
        for (var i = 0; i < descUserDiv.length; i++) {
            descUserDiv[i].onclick = function () {
                {% comment %}请求服务器{% endcomment %}
                let userID = this.id;
                $ajax('post', '{% url "app:descBloger"%}', {"userId": userID},
                    function (msg) {
                        let data = JSON.parse(msg);
                        let isManage = data['isManager'];
                        let whichDegree = `<span id="degree"><span class="iconfont superuser"
                                            style="  font-size: 12px;">&#xe60f;</span>普通用户</span>`;
                        if (isManage) {
                            whichDegree = ` <span id="degree"><span class="iconfont normaluser"
                                            style="  font-size: 12px;">&#xe68a;</span>管理员</span>`;
                        }
                        let str = `<div id="msg-top">用户简介
            <span class="iconfont close" id="closeMsg">&#xe600;</span>
        </div><div id="msg-bottom">
            <img src="../../${data['avatar']}" alt="${data['username']}">
            ${whichDegree}
            <span id="messageTa"> <span class="iconfont">&#xe62c;</span>私信ta</span>
            <div id="message-ri"><span class="msg-bottom-ri" id="${data['userId']}">昵称:${data['username']}</span>

              <span class="msg-bottom-ri job">职业:${data['job']}</span>
<span id="descTag">个人简介:</span>
<div class="msg-bottom-ri">${data['desc']}</div>
            </div>
</div>`;
                        popMsg(str);


                        let messageTa = document.getElementById('messageTa');
                        let messageRi = document.getElementById('message-ri');
                        messageTa.onclick = function () {
                            let messageRiChNum = messageRi.childNodes.length;
                            if (messageRiChNum <= 8) {
                                let newDiv = document.createElement('div');
                                newDiv.style.width = '100%';
                                newDiv.style.height = '100%';
                                newDiv.style.backgroundColor = 'rgba(77, 77, 77, 1)';
                                newDiv.style.position = 'absolute';
                                newDiv.style.borderTop = '1px solid silver';
                                newDiv.style.borderLeft = '1px solid silver';
                                messageRi.appendChild(newDiv);
                                let str = `

<span class="iconfont close" id="closeMsg2">&#xe600;</span>
                        <textarea id="messageContent" placeholder="请输入私信内容~"></textarea>
<span id="messageBu">发送</span>
                        `;
                                newDiv.innerHTML = str;
                            }

                            {% comment %}点击x关闭{% endcomment %}
                            let closeMsg2 = document.getElementById('closeMsg2');
                            closeMsg2.onclick = function () {
                                closeMsg2.parentNode.parentNode.removeChild(closeMsg2.parentNode);
                            }

                            {% comment %}点击发送私信{% endcomment %}
                            let messageBu = document.getElementById('messageBu');
                            messageBu.onclick = function () {
                                let messageContent = document.getElementById('messageContent');
                                let messageCon = messageContent.value;
                                if (messageCon.length < 5) {
                                     popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe600;</span>
        </div><div id="msg-bottom">再多写点吧~</div>`);

                                } else {
                                    let receiverId = document.getElementsByClassName('msg-bottom-ri')[0].id;
                                    $ajax('post', '{% url "app:sendMessage" %}', {
                                            'senderId': '{{userId}}',
                                            'receiverId': receiverId,
                                            'content': messageCon
                                        },
                                        function (msg) {
                                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe600;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                            closeMsg2.parentNode.parentNode.removeChild(closeMsg2.parentNode);

                                        }, function (msg) {
                                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe600;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                        }
                                    )

                                }
                            }
                        }


                    },
                    function (msg) {
                        popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe600;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                    }
                )
            }
        }
    }

</script>